<template>
  <div class="body"
       v-loading="realFlowLoading"
       :element-loading-text="otherI18n.Loading" >
    <bpm-d-navbar @submitVerify="submitVerify"
                  @confirmVerify="confirmVerify"
                  @rejectVerify="rejectVerify"
                  @rejectConfirmVerify="rejectConfirmVerify"
                  @reassignVerify="reassignVerify"/>
    <bpm-d-diagram v-show="diagramVisible"/>
    <bpm-d-history v-show="historyVisible"/>
    <!--业务实现-->
    <div v-show="mainVisible">
      <bpm-d-basearea :title="getLanguage('title.expenseReimburseProcess')" />
      <bpm-d-businessarea />
      <bpm-d-attachframe :allowCreate="true"
                         :allowUpdate="true"
                         :allowDelete="true"
                         :allowUpdateOthers="false"
                         :allowDeleteOthers="false"/>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'page',
  data () {
    return {
      baseTitle: this.getLanguage('title.expenseReimburseProcess'),
      isDialogVisible: false,
      saberDialogWidth: '882px',
      flowLoading: false
    }
  },
  computed: {
    ...mapState(['bizData', 'mainVisible', 'diagramVisible', 'historyVisible', 'pageType', 'pageTypeEnum']),
    ...mapState(['lang', 'langEnum', 'inst', 'bpmcoreI18n']),
    ...mapState(['ssc', 'apiloading', 'otherI18n']),
    ...mapState(['userId', 'tsId', 'dictFields', 'viewTableVisible', 'view1stMounted']),
    realFlowLoading () {
      return this.flowLoading || (this.apiloading > 0)
    },
    chailvRowGridInfo () {
      console.log('chailvrow payment grid item', this.$store.state.chailvRow.ssc.reimburse.whBtReimburseDdSub)
      return this.$store.state.chailvRow.ssc.reimburse.whBtReimburseDdSub
    },
    showChailvPart () {
      return (this.chailvRowGridInfo && this.chailvRowGridInfo.tsId)
    },
    whBtTravelSubsidyDetails: {
      get () {
        return this.ssc.reimburse.whBtTravelSubsidyDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtTravelSubsidyDetails', value)
      }
    },
    whBtTransportationDetails: {
      get () {
        return this.ssc.reimburse.whBtTransportationDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtTransportationDetails', value)
      }
    },
    whBtFareDetails: {
      get () {
        return this.ssc.reimburse.whBtFareDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtFareDetails', value)
      }
    },
    whBtStayDetails: {
      get () {
        return this.ssc.reimburse.whBtStayDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtStayDetails', value)
      }
    }
  },
  created () {
    this.setPageType(this.pageTypeEnum.approveFee)
  },
  mounted () {
    console.log('制证页面 page mounted start', this.view1stMounted)
    // 通用加载服务
    console.log('URL======', window.location.href)
    this.loadResource({me: this})
    //
    if (this.pageType !== this.pageTypeEnum.approveFee) { return }
    if (this.view1stMounted) {
      return
    }
    console.log('setView1stMounted', 1)
    this.setView1stMounted(true)
    this.$nextTick(function () {
      console.log('whole view mounted........')
      this.flowLoading = true
      setTimeout(() => {
        console.log('all needed ajax asked here for fee………………………………………………')
        // postarea
        this.getDataFromAJAX_Reim_005_ApproveFee_Open({me: this, async: false})
        let paramJson = {}
        paramJson.me = this
        // paramJson.tableNames = 'wh_bt_reimburse,wh_bt_reimburse_dd_sub,wh_bt_reimburse_costshare,wh_bt_travelsubsidydetails,wh_bt_transportationdetails,wh_bt_faredetails,wh_bt_staydetails,wh_bt_reimburse_rcm_details,wh_bt_reimburse_rcm_sub'
        paramJson.tableNames = 'WH_BT_FAREDETAILS,WH_BT_STAYDETAILS,WH_BT_TRANSPORTATIONDETAILS,WH_BT_TRAVELSUBSIDYDETAILS,WH_BT_REIMBURSE_COSTSHARE,WH_VBT_REIMBURSE_RCM_DETAILS,WH_BT_REIMBURSE_RCM_SUB,WH_BT_REIMBURSE_DD_SUB,WH_BT_REIMBURSE'
        paramJson.BB = 'Y'
        console.log('==========================approve=============================')
        this.getDataSscReimburseFromMoreTable(paramJson)
        if (this.isMakeCert() === '0') { // 未制证，调用接口查员工借款。
          this.getStaffLoanApproveFee({me: this, async: true})
        }
        // 计算可冲抵金额
        // this.reloadRechargeMoney()
        this.openOcr()
        // this.getDataSscReimburseWhBtReimburse({me: this})
        // let param = {}
        // param.me = this
        // param.companyCode = this.ssc.reimburse.whBtReimburse.reimbursecompanycode
        // this.queryBBOptions(param)

        // this.getDataFromTableDdSub(json)
        // //paymentgrid
        // if (this.showChailvPart) {
        //   console.log('gggggggggg122')
        //   this.getAllGrandSubTable()
        //   this.AJAX_Reim_013_Count_SubChild({me: this}) // 调用013算孙子表的各自合计金额
        // }
        // splitarea
        // this.getDataFromTableCostshare({me: this, async: true})
        // this.getDataFromTableRcmDetails({me: this, async: false})
        console.log('all needed ajax asked here^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^')
        this.flowLoading = false
      }, 100)
    })
  },
  methods: {
    ...mapActions(['loadResource', 'setView1stMounted']),
    ...mapActions(['setPageType']),
    ...mapActions(['submitApproveFee', 'loadResource', 'setBizData', 'setIsReassignVerify', 'setIsSubmitVerify', 'setIsConfirmVerify', 'setIsRejectVerify', 'setIsRejectConfirmVerify']),
    ...mapActions(['getDataSscReimburseWhBtReimburse', 'queryBBOptions', 'getDataSscReimburseFromMoreTable']),
    ...mapActions(['getDataFromTableDdSub', 'AJAX_Reim_013_Count_SubChild', 'queryInternalOrder']),
    ...mapActions(['getDataFromTableFareDetails', 'getDataFromTableStayDetails', 'getDataFromTableTransportationDetails', 'getDataFromTableTravelSubsidyDetails']),
    ...mapActions(['getDataFromTableCostshare', 'getStaffLoanApproveFee', 'getDataFromAJAX_Reim_005_ApproveFee_Open', 'getDataFromTableRcmDetails']),
    submitVerify () {
      this.setIsSubmitVerify(false)
      console.log('submitVerify start- >')
      // todo 业务校验

      if (!this.requriedVerifyFee()) {
        return
      }
      this.setBizData('{"totalsum":"0.00"}') // 根据实际业务传输金额
      console.log('submitVerify end- >')
      this.setIsSubmitVerify(true)
    },
    confirmVerify () {
      this.setIsConfirmVerify(false)
      console.log('confirmVerify 校验业务数据开始- >')
      // todo 业务校验
      this.submitApproveFee({
        me: this,
        applyDate: this.toLocaleDate(this.inst.createTime)
      })
      if (this.$store.state.retMsg !== '') {
        this.alert(this.getResource('alert.information.error') + ':error info: ' + this.$store.state.returnCode + ' ' + this.$store.state.retMsg)
        return false
      }
      console.log('confirmVerify 校验业务数据结束- >')
      this.setIsConfirmVerify(true)
    },
    rejectVerify () {
      this.setIsRejectVerify(false)
      console.log('rejectVerify 校验业务数据开始- >')
      if (this.isMakeCert() === '-1') {
        this.alert(this.getResource('alert.info.carddebt.no.reject')) // 已经制证,不允许驳回
        return
      }
      console.log('rejectVerify 校验业务数据结束- >')
      this.setIsRejectVerify(true)
    },
    rejectConfirmVerify () {
      this.setIsRejectConfirmVerify(false)
      console.log('rejectConfirmVerify 校验业务数据开始- >')
      // todo 业务校验
      console.log('rejectConfirmVerify 校验业务数据结束- >')
      this.setIsRejectConfirmVerify(true)
    },
    reassignVerify () {
      this.setIsReassignVerify(false)
      console.log('reassignVerify 校验业务数据开始- >')
      // todo 业务校验
      console.log('reassignVerify 校验业务数据结束- >')
      this.setIsReassignVerify(true)
    },
    getAllGrandSubTable () {
      // 补贴 出租 交通 住宿
      if (!this.whBtFareDetails || this.whBtFareDetails.length <= 0) {
        this.getDataFromTableFareDetails({me: this, async: true})
      }
      if (!this.whBtStayDetails || this.whBtStayDetails.length <= 0) {
        this.getDataFromTableStayDetails({me: this, async: true})
      }
      if (!this.whBtTransportationDetails || this.whBtTransportationDetails.length <= 0) {
        this.getDataFromTableTransportationDetails({me: this, async: true})
      }
      if (!this.whBtTravelSubsidyDetails || this.whBtTravelSubsidyDetails.length <= 0) {
        this.getDataFromTableTravelSubsidyDetails({me: this, async: true})
      }
    }
  }
}
</script>

<style scoped>
  .body {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }
</style>
